import React, { useState } from 'react';
import { Button, ResponsiveGrid, Card, Loading, Tag, Message } from '@alifd/next';
import { getArticles, removeArticle } from './service';
import { useEffectOnce } from 'react-use';
import { ArticleElement } from '@/api/GlobalInterface';
import { Link, logger, useHistory } from 'ice';
import { Popconfirm } from 'antd';
import { useRequest } from 'ahooks';
import styles from './index.module.scss';

const { Cell } = ResponsiveGrid;

const ArticleList = () => {
  const history = useHistory();
  const { data, error, loading: articleLoading, run } = useRequest(getArticles);
  const [loading, setLoading] = useState(false);
  if (error) {
    logger.log(error);
  }
  if (articleLoading) {
    return (
      <ResponsiveGrid gap={20}>
        <Cell colSpan={12}>
          <div className={styles.container}>
            <div className={styles.title}>文章列表</div>
            <div className={styles.loading}>
              <Loading></Loading>
            </div>
          </div>
        </Cell>
      </ResponsiveGrid>
    );
  }
  const presetColors = ['blue', 'green', 'orange', 'red', 'turquoise', 'yellow'];
  return (
    <ResponsiveGrid gap={25} columns={24}>
      {data?.map((item, index) => (
        <Cell colSpan={6} key={index}>
          <Card className="media-card" free>
            <Card.Media>
              <img src={item.articleImg} />
            </Card.Media>
            <Card.Header
              title={item.articleName}
              subTitle={item.categoryNames.map((item, index) => (
                <Tag
                  type="normal"
                  size="small"
                  key={index}
                  color={presetColors[index % presetColors.length]}
                  style={{ marginTop: 5, marginRight: 5 }}
                >
                  {item.value}
                </Tag>
              ))}
            />
            <Card.Content></Card.Content>
            <Card.Actions>
              <Link
                to={{
                  pathname: `/basic/ArticleRelease/${item._id}`,
                  state: { ...item },
                }}
              >
                <Button type="primary" key="edit">
                  编辑
                </Button>
              </Link>
              <Popconfirm
                title={`确定要删除${' '}${item.articleName}${' '}吗？`}
                onConfirm={() => {
                  setLoading(true);
                  removeArticle(item._id)
                    .then(() => {
                      Message.success({
                        content: '删除文章成功',
                      });
                      setLoading(false);
                    })
                    .then(() => {
                      // getArticles().then((res) => setData(res));
                      run();
                    })
                    .catch((err) => logger.trace(err));
                }}
                onCancel={(e) => {
                  logger.log(e);
                }}
                okText="确定"
                cancelText="取消"
              >
                <Button loading={loading} type="primary" key="remove" style={{ marginLeft: 20 }}>
                  删除
                </Button>
              </Popconfirm>
            </Card.Actions>
          </Card>
        </Cell>
      ))}
    </ResponsiveGrid>
  );
};

export default ArticleList;
